<template>
  <div class="sigin-in-subscribe-withdraw">
    <c-title text="提现"></c-title>
    <main class="main">
      <div class="box">
        <van-cell-group>
          <van-field v-model="form.amounts" readonly type="number" label="管理奖数量" />
          <van-field v-model="form.poundage_amount" readonly type="number" label="手续费" />
          <van-field v-model="form.pay_way" disabled label="提现方式" right-icon="arrow" placeholder="请选择提现方式" @click="getWithdrawMode" />
          <van-field
            v-model="form.password"
            :type="showPass ? '' : 'password'"
            label="支付密码"
            :right-icon="showPass ? 'eye-o' : 'closed-eye'"
            placeholder="请输入支付密码"
            :error-message="passwordErr"
            @input="passwordInput"
            @click-right-icon="showPass = !showPass"
          />
        </van-cell-group>
      </div>
    </main>
    <div class="btn">
      <van-button color="#F51D1D" @click="confirm">确定</van-button>
    </div>
    <!-- 提现方式弹窗 -->
    <van-popup v-model="show1" position="bottom" :style="{ height: '60%' }">
      <div class="withdrawal_box_no">
        <h2 style="display: flex; padding: 0.625rem;">
          <span style="flex: 1;">选择{{ fun.initWithdrawal() }}方式</span>
          <i class="iconfont icon-close11" style="text-align: right;" @click="show1 = false"></i>
        </h2>
        <van-radio-group v-model="pay_type" @change="SelectHandle">
          <div class="withdrawal_box_listBox">
            <!-- 余额 -->
            <div class="withdrawal_box_list" v-if="hasWithdrawMode('balance')">
              <i class="iconfont icon-fontclass-fanli"></i>
              <div class="withdrawal_box_list_wrap">
                <span class="txt">{{ pay_typeList.balance.other_name || pay_typeList.balance.name }}</span>
                <span class="txtTwo">通过审核后将打款到系统{{ pay_typeList.balance.other_name || pay_typeList.balance.name }}！</span>
              </div>
              <div class="withdrawal_box_list_check">
                <van-radio checked-color="#f96d20" name="balance"></van-radio>
              </div>
            </div>
            <!-- 微信 -->
            <div class="withdrawal_box_list" v-if="hasWithdrawMode('wechat')">
              <i class="iconfont icon-card_weixin"></i>
              <div class="withdrawal_box_list_wrap">
                <span class="txt">{{ pay_typeList.wechat.other_name }}</span>
                <span class="txtTwo">通过审核后将打款到个人微信零钱！</span>
              </div>
              <div class="withdrawal_box_list_check">
                <van-radio checked-color="#f96d20" name="wechat"></van-radio>
              </div>
            </div>
            <!-- 支付宝 -->
            <div class="withdrawal_box_list" v-if="hasWithdrawMode('alipay')">
              <i class="iconfont icon-all_alipay"></i>
              <div class="withdrawal_box_list_wrap">
                <span class="txt">{{ pay_typeList.alipay.other_name }}</span>
                <span class="txtTwo">通过审核后将打款到个人支付宝！</span>
              </div>
              <div class="withdrawal_box_list_check">
                <van-radio checked-color="#f96d20" name="alipay"></van-radio>
              </div>
            </div>
            <!-- 微信-好灵工 -->
            <div class="withdrawal_box_list" v-if="hasWithdrawMode('worker_withdraw_wechat')">
              <i class="iconfont icon-balance_i"></i>
              <div class="withdrawal_box_list_wrap">
                <span class="txt">提现到微信-好灵工</span>
              </div>
              <div class="withdrawal_box_list_check">
                <van-radio checked-color="#f96d20" name="worker_withdraw_wechat"></van-radio>
              </div>
            </div>
            <!-- 支付宝-好灵工 -->
            <div class="withdrawal_box_list" v-if="hasWithdrawMode('worker_withdraw_alipay')">
              <i class="iconfont icon-balance_j"></i>
              <div class="withdrawal_box_list_wrap">
                <span class="txt">提现到支付宝-好灵工</span>
              </div>
              <div class="withdrawal_box_list_check">
                <van-radio checked-color="#f96d20" name="worker_withdraw_alipay"></van-radio>
              </div>
            </div>
            <!-- 银行卡-好灵工 -->
            <div class="withdrawal_box_list" v-if="hasWithdrawMode('worker_withdraw_bank')">
              <i class="iconfont  icon-balance_f"></i>
              <div class="withdrawal_box_list_wrap">
                <span class="txt">提现到银行卡-好灵工</span>
              </div>
              <div class="withdrawal_box_list_check">
                <van-radio checked-color="#f96d20" name="worker_withdraw_bank"></van-radio>
              </div>
            </div>
            <!-- 高灯支付宝 -->
            <div class="withdrawal_box_list" v-if="hasWithdrawMode('high_light_alipay')">
              <i class="iconfont icon-all_alipay"></i>
              <div class="withdrawal_box_list_wrap">
                <span class="txt">{{ pay_typeList.high_light_alipay.other_name }}</span>
                <span class="txtTwo">通过审核后将打款到个人支付宝！</span>
              </div>
              <div class="withdrawal_box_list_check">
                <van-radio checked-color="#f96d20" name="high_light_alipay"></van-radio>
              </div>
            </div>
            <!-- 高灯银行卡 -->
            <div class="withdrawal_box_list" v-if="hasWithdrawMode('high_light_bank')">
              <i class="iconfont icon-balance_g"></i>
              <div class="withdrawal_box_list_wrap">
                <span class="txt">{{ pay_typeList.high_light_bank.other_name }}</span>
                <span></span>
              </div>
              <div class="withdrawal_box_list_check">
                <van-radio checked-color="#f96d20" name="high_light_bank"></van-radio>
              </div>
            </div>
            <!-- 高灯微信 -->
            <div class="withdrawal_box_list" v-if="hasWithdrawMode('high_light_wechat')">
              <i class="iconfont icon-card_weixin"></i>
              <div class="withdrawal_box_list_wrap">
                <span class="txt">{{ pay_typeList.high_light_wechat.other_name }}</span>
                <span></span>
              </div>
              <div class="withdrawal_box_list_check">
                <van-radio checked-color="#f96d20" name="high_light_wechat"></van-radio>
              </div>
            </div>
            <!-- 手动打款 微信 银行卡 支付宝-->
            <div class="withdrawal_box_list" v-if="hasWithdrawMode('manual')">
              <i class="iconfont icon-pay_otherpay"></i>
              <div class="withdrawal_box_list_wrap">
                <span class="txt" v-if="pay_typeList.manual.manual_type == 1">{{ pay_typeList.manual.other_name }}-银行卡</span>
                <span class="txt" v-if="pay_typeList.manual.manual_type == 2">{{ pay_typeList.manual.other_name }}-微信</span>
                <span class="txt" v-if="pay_typeList.manual.manual_type == 3">{{ pay_typeList.manual.other_name }}-支付宝</span>
                <span class="txtTwo">通过审核后将由工作人员打款到您的{{ pay_typeList.manual.manual_type == 1 ? "银行卡" : pay_typeList.manual.manual_type == 2 ? "微信" : "支付宝" }}！</span>
                <div class="userTxt txtTwo">
                  <span v-if="pay_typeList.manual.manual_type == 1">{{ pay_typeList.manual.member_name }} {{ pay_typeList.manual.bank_card }}</span>
                  <span class="modify" v-if="pay_typeList.manual.manual_type == 1 && pay_typeList.manual.bank_card" @click="editUser">修改信息</span>
                </div>
              </div>
              <div class="withdrawal_box_list_check">
                <van-radio checked-color="#f96d20" name="manual"></van-radio>
              </div>
            </div>
            <!-- 汇聚 -->
            <div class="withdrawal_box_list" v-if="hasWithdrawMode('converge_pay')">
              <i class="iconfont icon-pay_otherpay"></i>
              <div class="withdrawal_box_list_wrap">
                <span class="txt">{{ pay_typeList.converge_pay.other_name }}</span>
                <span>通过审核后将由工作人员打款到您的银行卡</span>
              </div>
              <div class="withdrawal_box_list_check">
                <van-radio checked-color="#f96d20" name="converge_pay"></van-radio>
              </div>
            </div>
          </div>
        </van-radio-group>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      withdrawInfo: {},
      form: {
        amounts: "",
        poundage_amount: "0",
        pay_way: "",
        password: ""
      },
      show1: false,
      pay_typeList: {},
      pay_type: "",
      passwordErr: "",
      showPass: false
    };
  },
  activated() {
    this.getWithdraw(); //提现页面显示接口
  },
  methods: {
    async getWithdraw() {
      let { result, data, msg } = await $http.get("plugin.sign-buy.frontend.sign-buy-app.withdraw", {}, ".");
      if (result == 0) return this.$toast(msg);
      this.withdrawInfo = data;
      this.form.amounts = data.sum_amount;
      this.form.poundage_amount = data.poundage_amount;
    },
    async getWithdrawMode() {
      let { result, data, msg } = await $http.get("finance.income-withdraw.get-income-withdraw-mode", { income_type: "default" }, ".");
      if (result == 0) return this.$toast(msg);
      this.pay_typeList = data;
      this.show1 = true;
    },
    passwordInput() {
      this.passwordErr = "";
    },
    hasWithdrawMode(name) {
      // 是否存在该提现方式
      return this.pay_typeList.hasOwnProperty(name) || false;
    },
    SelectHandle() {
      this.show1 = false;
      this.form.pay_way = this.pay_typeList[this.pay_type].other_name;
    },
    async confirm() {
      if (!this.pay_type) {
        return this.$toast("请选择提现方式！");
      }
      if (!this.form.password) {
        this.passwordErr = "请填写密码";
        return this.$toast("请填写密码！");
      }
      let { result, data, msg } = await $http.get("plugin.sign-buy.frontend.password-verify.index", { pwd: this.form.password }, ".");
      if (result == 0) {
        this.passwordErr = msg;
        this.$dialog.confirm({
          message: msg,
          confirmButtonText: "重新输入",
          cancelButtonText: "忘记密码"
        })
          .then(() => {
            // on confirm
            this.form.password = "";
            this.passwordErr = "";
          })
          .catch(() => {
            // on cancel
            this.$router.push(this.fun.getUrl('set_balance_password'));
          });
        return ;
      }
      this.applywithdraw();
    },
    async applywithdraw() {
      let { sum_amount, poundage_amount, withdrawal } = this.withdrawInfo;

      let withdrawData = {
        total: {
          amounts: sum_amount,
          pay_way: this.pay_type,
          poundage: poundage_amount
        },
        withdrawal: withdrawal
      };

      let { result, data, msg } = await $http.post("withdraw.apply.index", {data: withdrawData}, ".");
      this.$dialog.alert({message: msg});
      if (result == 1) this.getWithdraw(); //更新数据
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .van-button {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0.3125rem;
}

.sigin-in-subscribe-withdraw {
  height: 100vh;
  width: 100%;
  position: relative;

  .btn {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3.125rem;
    padding: 0.3125rem 1.7188rem;
    background: #fff;
  }

  .main {
    padding: 0.625rem;
  }

  .box {
    background: #fff;
  }

  // 提现方法
  .withdrawal_box_no {
    h2 {
      background: #fff;
      line-height: 2.875rem;
      font-size: 16px;
      position: sticky;
      top: 0;
      left: 0;
      z-index: 1;

      .icon-close11 {
        width: 3rem;
        display: inline-block;
        position: absolute;
        right: 1rem;
        font-size: 1rem;
        color: #666;
      }
    }

    .withdrawal_box_list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 0.97rem 1rem 1.13rem;
      box-sizing: border-box;

      .iconfont {
        color: #f96d20;
        font-size: 1.5rem;
      }

      .withdrawal_box_list_wrap {
        flex: 1;
        margin-left: 0.75rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        font-size: 0.81rem;

        .txt {
          font-size: 0.94rem;
          font-weight: 600;
        }

        .txtTwo {
          margin-top: 0.66rem;
        }

        .userTxt {
          display: flex;
          align-items: center;
        }

        .modify {
          margin-left: 0.91rem;
          color: #ee3131;
        }
      }

      .withdrawal_box_list_check {
        position: relative;
      }
    }
  }
}
</style>
